:root {
  --color-primary: #04a9f5;

  --header-color: #ccc;
  --header-color-f: #fafafa;
  --header-color-hover: #fff;
  --header-bg: #1e2427;
  --header-bg-hover: #272d30;

  --sider-border: 1px solid #181818;
  --sider-color: #fafafa;
  --sider-color-1: #bfbfbf;
  --sider-color-f: #fff;
  --sider-bg: var(--header-bg);
  --sider-header-bg: var(--header-bg-hover);
  --sider-collapse-header-bg: var(--header-bg);
  --sider-header-border: 1px solid var(--header-bg);

  --layer-bg: var(--header-bg);
  --layer-bg-hover: var(--header-bg-hover);
  --layer-header-bg: var(--header-bg-hover);

  --footer-color: #fafafa;
  --footer-bg: var(--header-bg);

  --form-bg: #181818;
  --form-label: #fafafa;
  --form-item-color: rgba(255, 255, 255, .85);
  --form-item-bg: #202124;
  --form-item-border: 1px solid #5a5a5a;
  --form-select-hover: #3c4043;

  --color-primary-a: rgba(64, 158, 255, 0.4);
  --modal-bg: #282c34;
  --contextmenu-bg: #282c34;
  --contextmenu-bg-hover: #393e49;
  --contextmenu-divider-color: #22242b;
}

.data-view-container {
  position: relative;
  width: 100%;
  height: 100%;

  .data-view-header {
    z-index: 99;
    height: 48px;
    line-height: 48px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    background-color: var(--header-bg);
    transition: all linear 500ms;

    .back {
      font-size: 20px;
      width: 54px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: -20px;
      color: var(--header-color-f);
      cursor: pointer;

      &:hover {
        background: var(--header-bg-hover);
      }
    }

    .data-view-menu {
      display: flex;
      height: 48px;
      line-height: 48px;
      background-color: var(--header-bg);

      .ant-menu-submenu-active {
        color: var(--header-color-hover);
        background-color: var(--header-bg-hover);
      }

      .ant-menu-submenu-title {
        color: var(--header-color);

        &:hover {
          color: var(--header-color-hover);
          background-color: var(--header-bg-hover);
        }
      }
    }

    .handler {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      margin-right: -10px;

      i {
        width: 48px;
        height: 48px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--header-color-f);
        cursor: pointer;

        &:hover {
          background: var(--header-bg-hover);
        }
      }
    }
  }

  .data-view-main {
    flex-direction: row;

    .ant-layout-sider {
      z-index: 9;
    }

    .ant-layout-sider-zero-width-trigger {
      top: unset;
      bottom: 0;
      z-index: 9;
      height: 36px;
      line-height: 36px;
    }

    .data-view-layer {
      flex: auto;
      display: flex;
      height: 100%;
      overflow: hidden;
      transition: 0.3s ease;
      flex-direction: column;
      border-right: var(--sider-border);
      background-color: var(--layer-bg);

      .layer-header {
        position: sticky;
        width: 200px;
        z-index: 99;
        font-size: 13px;
        height: 36px;
        line-height: 36px;
        color: var(--sider-color);
        text-align: center;
        text-indent: 2px;
        letter-spacing: 2px;
        padding: 0 20px;
        background-color: var(--layer-header-bg);
      }

      .layer-wrapper {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        flex: auto;
        flex-direction: column;

        &::-webkit-scrollbar {
          display: none;
        }

        .layer-item {
          display: flex;
          flex: none;
          width: 100%;
          height: 48px;
          padding: 0 5px;
          position: relative;
          color: var(--sider-color);
          cursor: pointer;
          align-items: center;
          margin-bottom: 1px;

          &.active {
            color: var(--sider-color-f) !important;
            background-color: var(--color-primary) !important;
          }

          &:hover {
            color: var(--sider-color-f);
            background-color: var(--layer-bg-hover);
            cursor: pointer;
          }

          .layer-item-icon {
            flex: none;
            color: var(--color-primary);
            margin-right: 10px;
            width: 52px;
            height: 30px;
            line-height: 35px;
            text-align: center;
            display: block;
            border: 1px solid #3a4659;
            background-color: #282a30;

            i {
              font-size: 25px;
            }
          }

          .layer-item-label {
            flex: auto;
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            span {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              user-select: none;
            }
          }
        }
      }
    }

    .data-view-screen {
      position: relative;
      height: 100%;
      overflow: hidden;
      flex-direction: column;
      background: url();

      .data-view-screen-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: auto;

        &::-webkit-scrollbar {
          width: 5px;
          height: 5px;
        }

        &::-webkit-scrollbar-corner {
          display: none;
        }

        &::-webkit-scrollbar-thumb {
          background-color: #434b55;
        }

        .data-view-layout {
          position: absolute;
          top: 64px;
          left: 64px;
          background-position: center, right bottom;
          background-repeat: no-repeat, no-repeat;
          background-size: cover, contain;
          box-shadow: rgb(0 0 0 / 50%) 0 0 30px 0;
          transition: 0.2s all ease-in-out;
          transform-origin: 0 0;

          * {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
          }

          .data-view-item {
            position: absolute;
            will-change: transform;

            &.active {
              z-index: 99 !important;

              .resize-handler {
                border: 1px solid var(--color-primary);

                .drag-dot {
                  display: block !important;
                }
              }
            }

            .data-view-item-handler {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              box-sizing: border-box;

              &.hover {
                .resize-handler::after {
                  content: ' ';
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  display: block;
                  background-color: var(--color-primary-a);;
                  border: 1px solid var(--color-primary);
                  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 50%);
                  box-sizing: border-box;
                  pointer-events: none;
                }
              }

              .rotate-handler {
                position: absolute;
                top: -36px;
                left: 50%;
                transform: translateX(-50%);
                cursor: grab;
                color: var(--color-primary);
                font-size: 20px;
              }

              .resize-handler {
                width: 100%;
                height: 100%;

                .drag-dot {
                  display: none;
                  position: absolute;
                  width: 8px;
                  height: 8px;
                  border: 1px solid var(--color-primary);
                  background-color: #ffffff;
                  z-index: 999;
                }
              }

              .data-view-chart {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transform-origin: 50% 50%;
                transform: scaleX(1) scaleY(1) rotateZ(360deg);
                pointer-events: none !important;

                .chart {
                  width: 100%;
                  height: 100%;
                }
              }
            }

            .indicator-lines {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;

              .x-line {
                position: absolute;
                top: 0;
                border-top: 1px dashed var(--color-primary);
                height: 0;
                transform: translateX(-100%);
              }

              .y-line {
                position: absolute;
                top: 0;
                left: 0;
                border-left: 1px dashed var(--color-primary);
                width: 0;
                transform: translateY(-100%);
              }

              .coordinate {
                top: -5px;
                left: -8px;
                position: absolute;
                padding: 5px;
                transform: translate(-100%, -100%);
                color: var(--color-primary);
                font-size: 18px;
                white-space: nowrap;
              }
            }
          }
        }
      }

      .data-view-screen-footer {
        height: 36px;
        line-height: 36px;
        padding: 0 40px;
        background-color: var(--footer-bg);
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .data-view-scale {
          display: flex;
          margin: 0;
          width: 200px;
        }

        .tool-item {
          display: flex;
          align-items: center;

          .label {
            font-size: 13px;
            color: var(--footer-color);
            margin: 0 10px;
          }

          .tool-btn {
            font-size: 13px;
            cursor: pointer;
            color: var(--footer-color);
            margin: 0 5px;

            &:hover {
              color: var(--color-primary);
            }
          }

          .ant-switch {
            height: 18px;

            &::after {
              top: 0;
              margin: 0 !important;
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }

    .data-view-option-panel {
      border-left: var(--sider-border);
      background-color: var(--sider-bg);

      .data-view-screen-option {
        height: 100%;
        overflow-y: auto;

        &::-webkit-scrollbar {
          display: none;
        }

        .screen-option-header {
          z-index: 99;
          position: fixed;
          top: 48px;
          width: 400px;
          line-height: 1.5;

          span {
            display: flex;
            justify-content: center;
            padding: 12px;
            color: var(--sider-color);
            background-color: var(--sider-header-bg);
          }
        }

        .screen-option-body {
          margin-top: 45px;
        }
      }

      .data-view-chart-option {
        height: 100%;
        overflow: auto;
        background-color: var(--sider-bg);

        &::-webkit-scrollbar {
          display: none;
        }

        .info {
          font-size: 12px;
          padding: 0 20px;
          color: var(--sider-color);

          .ant-btn-sm {
            font-size: 12px;
            height: 20px;
            padding: 0 4px;
          }

          .title {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            padding-top: 16px;

            .version {
              color: var(--sider-color-1);
            }

            .update {
              font-size: 13px;
              cursor: pointer;

              &:hover {
                color: var(--color-primary);
              }
            }
          }

          .doc {
            display: flex;
            margin: 12px 0;
            color: var(--sider-color-1);
          }
        }

        .ant-tabs-nav {
          width: 100%;
          color: var(--sider-color);
          background-color: var(--sider-header-bg);
        }

        &.two {
          .ant-tabs-tab {
            width: 50%;
            margin: 0;
            text-align: center;
          }
        }

        &.three {
          .ant-tabs-tab {
            width: 33.33%;
            margin: 0;
            text-align: center;
          }
        }

        .ant-tabs-bar {
          position: fixed;
          top: 48px;
          width: 400px;
          z-index: 99;
        }

        .ant-tabs-content {
          margin-top: 46px;

          .ant-collapse {
            font-size: 12px;
            background-color: var(--sider-bg);

            & > .ant-collapse-item {
              border: none;
            }

            .ant-collapse-header {
              cursor: pointer;
              display: flex;
              align-items: center;
              height: 40px;
              line-height: 40px;
              padding: 0 12px 0 40px;
              color: var(--sider-color);
              background-color: var(--sider-collapse-header-bg);
              border-bottom: var(--sider-header-border);
            }

            .ant-collapse-content {
              .ant-collapse-content-box {
                padding: 0;
              }

              .ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content {
                background-color: var(--sider-color);
              }

              .ant-collapse-borderless > .ant-collapse-item {
                border: none;
              }
            }
          }
        }
      }
    }
  }
}

/*========== 菜单 ==========*/
.ant-menu-dark.ant-menu-submenu-popup {
  .chart-type-icon {
    vertical-align: middle;
    line-height: 40px;
    font-size: 25px !important;
    margin-right: 10px;
    transition: font-size .15s cubic-bezier(.215, .61, .355, 1), margin .3s cubic-bezier(.645, .045, .355, 1);
  }

  .ant-menu-sub {
    color: var(--header-color);
    background-color: var(--header-bg);

    .ant-menu-submenu-active {
      color: var(--header-color-hover);
      background-color: var(--header-bg-hover);
    }
  }

  .ant-menu-submenu-title, .ant-menu-item {
    margin: 0;
    height: 48px;
    line-height: 48px;
    cursor: default;
    color: var(--header-color);
    user-select: none;

    &:active {
      background-color: var(--header-bg) !important;
    }

    &:hover {
      color: var(--header-color-hover);
      background-color: var(--header-bg-hover);
    }
  }
}

/*========== 右键弹出菜单 ==========*/
.ant-dropdown-menu {
  width: 120px;
  color: var(--form-label);
  background: var(--contextmenu-bg);

  .ant-dropdown-menu-item {
    font-size: 12px;
    height: 25px;
    color: var(--form-label);
    padding: 0 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;

    &:hover {
      color: var(--color-primary);
      background: var(--contextmenu-bg-hover);
    }
  }

  .ant-dropdown-menu-item-divider {
    background-color: var(--contextmenu-divider-color);
  }
}

/*========== form ==========*/
.dark-theme {
  .ant-collapse {
    .ant-form {
      background-color: var(--form-bg);
    }
  }

  .ant-form {
    padding: 20px;
    color: var(--form-label);

    label {
      color: var(--form-label);
    }
  }

  .ant-input,
  .ant-switch,
  .ant-input-number,
  .ant-select-selection {
    color: var(--form-item-color) !important;
    background-color: var(--form-item-bg) !important;
    border: var(--form-item-border) !important;
  }

  .ant-input-group-addon {
    border: none;
    background: none;

    .ant-select-selection {
      margin: 0;
    }
  }

  .ant-switch-checked {
    background-color: var(--color-primary) !important;
  }

  .ant-select-arrow {
    color: var(--form-label);
  }

  .ant-input-number-handler-wrap {
    border: none;
    background-color: var(--form-item-bg);

    .ant-input-number-handler {
      &:active {
        background-color: var(--form-item-bg);
      }

      i {
        color: var(--form-label);
      }

      border: 1px solid #0b0c0d;
    }
  }
}

/*========== 下拉选择菜单 ==========*/
.ant-select-dropdown {
  background-color: var(--form-item-bg);

  .ant-select-dropdown-menu {
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    &::-webkit-scrollbar-corner {
      display: none;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #434b55;
    }

    .ant-select-dropdown-menu-item {
      color: var(--form-label);

      &:hover {
        background-color: var(--form-select-hover) !important;
      }
    }

    .ant-select-dropdown-menu-item-selected {
      color: var(--form-label);
      background-color: var(--form-select-hover) !important;
    }

    .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
      background-color: var(--form-select-hover) !important;
    }
  }
}

/*========== 覆盖其他样式 ==========*/
.ant-switch-checked {

}

.ant-btn-primary {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.ant-btn-background-ghost.ant-btn-primary {
  color: var(--color-primary);
}


.ant-btn {
  line-height: 1;
}


.ant-tabs-nav-wrap {
  margin-bottom: 0;
}

